/**
 * @Description 
 * @Version 
 * @Author Dong
 * @Date 2021-03-08 16:39:06
 * @LastEditors Dong
 * @LastEditTime 2021-03-09 09:27:07
 * @FilePath \fed-e-task-04-06\code\work\src\app\animation.ts
 */

// src\app\animation.ts
import { animate, animateChild, animation, keyframes, query, stagger, style, transition, trigger, useAnimation } from '@angular/animations';

// 入场动画
export let slideAnimationEnter = animation([
    // 初始样式
    style({ opacity: 0, transform: "translateY(40px)" }),
    // 入场动画时间
    animate(500)
])

// 出场动画
export let silideAnimationLeave = animation([
    animate(
        // 动画样式
        '600ms 100ms ease-out',
        // 关键帧动画
        keyframes([
            style({ offset: .5, transform: "translateX(-80px)" }),
            style({ offset: 1, transform: "translateX(100%)", opacity: 0 }),
        ])
    )
])

// todo 列表项的入场与出场
export let todoAnimations = trigger("slide", [
    transition("void => *", useAnimation(slideAnimationEnter)),
    transition("* => void", useAnimation(silideAnimationLeave))
])

// todos 下让每个 todo 动画的执行都依次延后
export let todosAnimations = trigger("todoSlide", [
    transition("void => *", [
        query("@slide", stagger(150, animateChild()))
    ])
])